<template>
    <div id="home-content" v-cloak>
        
        <!-- 新闻 -->
        <news-c></news-c>

        <!-- 文档 -->
        <div id="home-box">
        <h2 class="htwo">PC Side Web Development. </h2>
        <learnmore :width="290" path="/project">Learn more about Project</learnmore>   
         
        <timeline-c leftorright="left">
            <timelinehead-c>
               <span slot="headcontent">
               <span class="blue">这里是我个人博客的源码</span> 写博客的时候也是碰到不少问题 也是边学边写 让自己的技术更牢固
               </span>
            </timelinehead-c>
           
           <timelinehead-icon>
               <img slot="headicon" v-lazy="require('@/assets/img/home/content/vue.png')" alt="">
               <span slot="headcontent">Vue (VueX VueRouter)、Axios、ElementUi、Lazyload、Markdown</span>
           </timelinehead-icon>

           <timelinecontent >
               <div id="project1box" slot="content" style="marginTop:30px">
               <lazyshow transition="fade-left" style="position:absolute;left:-5%;top:-5%;" >    
                <imgbox-c  :width="1200" :height="700" position="absolute" :zindex="1" >
                    <img  slot="img" v-lazy="require('@/assets/img/home/content/project1.png')" alt="">
                </imgbox-c>
               </lazyshow>
               
               
               
               <lazyshow transition="fade-scale-2s"  >    
                <imgbox-c  :width="1200" :height="700" position="absolute" style="left:-10%">
                    <img  slot="img" v-lazy="require('@/assets/img/home/content/test1.png')" alt="">
                </imgbox-c>
               </lazyshow>
               </div>
           </timelinecontent>

           
            
            <timelinecontent>    
                <div slot="content"  style="margin-top:50px">
                    <textbox>
                        <span>
                            <p><span class="green" style="line-height:1.2rem">Hello<span class="white"> World</span></span></p>
                            <p><span class="white" style="line-height:1.2rem">Console.log("前端新世界")</span></p>
                            <p><span class="green" style="line-height:5rem"><span class="pink">→</span> npm run serve
                            </span></p>
                            <p><span class="white"><imitationinput>npm run build</imitationinput> </span></p>
                        </span>
                    </textbox>
                </div>
           </timelinecontent>

            <timelinehead-icon>
               <img slot="headicon" v-lazy="require('@/assets/img/home/content/zip.png')" alt="">
               <span slot="headcontent"><download>点击下载(源码)</download></span>
           </timelinehead-icon>

           <timelinehead-icon>
               <img slot="headicon" v-lazy="require('@/assets/img/home/content/share.png')" alt="">
               <span slot="headcontent"><download>分享一些我的经验和心得</download></span>
           </timelinehead-icon>

           <timelinehead-c>
               <span slot="headcontent">
               </span>
            </timelinehead-c>
        </timeline-c>

        <h2 class="htwo">PC App Development.</h2>
        <learnmore :width="330" path="/flie">Learn more about Documents</learnmore>

        <timeline-c leftorright="left" >
            <timelinehead-c><span slot="headcontent">
               <span class="blue">使用Electron框架开发的桌面程序例子</span> Electron主要使用javascript代码编写 开发效率很迅速 也可以使用TypeScript以及Vue等框架使用</span>
            </timelinehead-c>

            <timelinehead-icon>
               <img slot="headicon" v-lazy="require('@/assets/img/home/content/flutter.png')" alt="">
               <span slot="headcontent">Electron+Vue(VueX VueRouter)</span>
           </timelinehead-icon>

           <timelinecontent>    
                <div slot="content" class="flex-start">
                           <lazyshow transition="fade-left">
                           <imgbox-c  :width="550" :height="300" :left="0">
                                <img  slot="img" v-lazy="require('@/assets/img/home/content/project2.png')" alt="">
                            </imgbox-c>
                            </lazyshow>

                            <lazyshow transition="fade-right-1s">
                            <h2 style="flex:1;marginTop:0px;width:70%" class="htwo1"> 
                                  <span>
                                   这是使用Electron框架开发的例子<br/>
                                   <span class="white" style="font-size:1.4rem;line-height:0px">在开发中 你只需要专注于实现和Web开发一样的功能就行了</span>
                                  </span>
                            </h2>
                            </lazyshow>
                </div>
           </timelinecontent>

           <timelinehead-icon>
               <img slot="headicon" v-lazy="require('@/assets/img/home/content/zip.png')" alt="">
               <span slot="headcontent"><download>点击下载(源码)</download></span>
           </timelinehead-icon>

           <timelinehead-icon>
               <img slot="headicon" v-lazy="require('@/assets/img/home/content/share.png')" alt="">
               <span slot="headcontent"><download>分享一些我的经验和心得</download></span>
           </timelinehead-icon>
           
            <timelinecontent>
            </timelinecontent>        
        </timeline-c>    
        </div>
        
        <!-- 高达模型 -->
        <div id="home-box1" style="margin-top:-30px">
            
            <timeline-c leftorright="left" iconcolor="#D6DBE4" >

                <timelinehead-icon bgcolor="white" iconcolor="#D6DBE4" contentcolor="black" >
                <span slot="headcontent" >
                   <h2 class="htwo1" style="padding-left:0px">Gundam Wall.</h2>
                   <h3 class="hblack" style="padding-left:0px">我的高达模型世界</h3>
                   <learnmore fontcolor="black" :width="360" path="/gundamwall" :pdleft="0">Learn more about GundamPhoto</learnmore>
                </span>     
                </timelinehead-icon>

                <timelinehead-icon bgcolor="white" iconcolor="#D6DBE4" contentcolor="black">
                   <img slot="headicon" style="backgroundColor:rgba(0,0,0,0)" v-lazy="require('@/assets/img/title/gundam.svg')" alt="">
                   <span slot="headcontent">
                     <span class="gray">Gundam Seed</span> (高达Seed)
                   </span>
                </timelinehead-icon>

           <timelinecontent>    
               
                           <lazyshow transition="fade-left" slot="content">
                           <div class="flex">
                           <div v-for="(i,index) in imgseed" class="el-img-box" :key="index">
                                    <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start">  
                                    <el-image
                                       class="el-img"
                                       style="width:300px" 
                                       alt=""
                                       
                                       :src="i"
                                       :preview-src-list="imglist"  
                                      >
                                    </el-image>
                                    </el-tooltip> 
                           </div>
                           </div>
                           </lazyshow>
               
           </timelinecontent>

           <timelinehead-icon bgcolor="rgba(0,0,0,0)" iconcolor="#D6DBE4" contentcolor="black">
               <img slot="headicon" style="backgroundColor:rgba(0,0,0,0)" v-lazy="require('@/assets/img/title/gundam.svg')" alt="">
               <span slot="headcontent">
                   <span class="gray">Gundam 00</span> (高达00)
               </span>
            </timelinehead-icon>

            <timelinecontent>    
               <lazyshow transition="fade-left" slot="content">
                           <div class="flex">
                           <div v-for="(i,index) in img00" class="el-img-box" :key="index">
                                    <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start">  
                                    <el-image
                                       class="el-img"
                                       style="width:300px" 
                                       alt=""
                                      
                                       :src="i"
                                       :preview-src-list="imglist"  
                                      >
                                    </el-image>
                                    </el-tooltip> 
                           </div>
                           </div>
                </lazyshow>
            </timelinecontent>

             <timelinehead-c bgcolor="white" iconcolor="#D6DBE4" contentcolor="black">
               <span slot="headcontent" >
               </span>
            </timelinehead-c>                                
            </timeline-c>
              
             <!-- 关于我 -->
             <h2 class="htwo1" >Aboute me.</h2>
             <h3 class="hblack" >关于我</h3>
             <learnmore  :width="247"  fontcolor="black" path="/aboutme" :pdleft="40">Learn more about me</learnmore>

             <timeline-c  leftorright="left" iconcolor="#D6DBE4">
                 

                  <timelinehead-icon bgcolor="rgba(0,0,0,0)" iconcolor="#D6DBE4" contentcolor="black">
                  <img slot="headicon" style="backgroundColor:white" v-lazy="require('@/assets/img/home/content/skill.svg')" alt="">
                    <span slot="headcontent">
                       <span class="gray">Web Front End</span> (Web前端相关)
                    </span>
                  </timelinehead-icon>
                    
                <timelinecontent>
                    <div class="flex-start" slot="content">
                          <skill img="html5.svg"><span slot="number">95%</span><span slot="text">Html5+Css3</span></skill>
                          <skill img="vue.svg"><span slot="number">93%</span><span slot="text">Vue</span></skill>
                          <skill img="js.svg"><span slot="number">95%</span><span slot="text">JavaScript</span></skill>
                          <skill img="electron.svg"><span slot="number">80%</span><span slot="text">Electron</span></skill>
                          <skill img="webpack.svg"><span slot="number">80%</span><span slot="text">Webpack</span></skill>
                          <skill img="typescript.svg"><span slot="number">80%</span><span slot="text">TypeScript</span></skill>
                          <skill img="react.svg"><span slot="number">正在学!</span><span slot="text">React</span></skill>
                    </div>
                </timelinecontent>

                 <timelinehead-icon bgcolor="rgba(0,0,0,0)" iconcolor="#D6DBE4" contentcolor="black">
                  <img slot="headicon" style="backgroundColor:white" v-lazy="require('@/assets/img/home/content/skill.svg')" alt="">
                    <span slot="headcontent">
                       <span class="gray">Web Backend</span> (Web后端相关)
                    </span>
                  </timelinehead-icon>   

                  <timelinecontent>
                    <div class="flex-start" slot="content">
                          <skill img="php.svg"><span slot="number">90%</span><span slot="text">Php</span></skill>
                          <skill img="python.svg"><span slot="number">80%</span><span slot="text">Python(Django)</span></skill>
                          <skill img="go.svg"><span slot="number">70%</span><span slot="text">Golang</span></skill>
                          <skill img="node-js.svg"><span slot="number">85%</span><span slot="text">Node.js</span></skill>
                         </div>  
                  </timelinecontent>
                   
                     <timelinehead-icon bgcolor="rgba(0,0,0,0)" iconcolor="#D6DBE4" contentcolor="black">
                   <img slot="headicon" style="backgroundColor:white" v-lazy="require('@/assets/img/home/content/skill.svg')" alt="">
                    <span slot="headcontent"><download>点击下载我的简历</download></span>
                   </timelinehead-icon>

                    <timelinecontent>
                      
                  </timelinecontent>      
             </timeline-c>
        </div>
         
         <div id="home-box2">
             <h2 class="htwo" style="padding-left:0px;width:40%;marginTop:200px;">Some Software.</h2>
             <h3 class="hblack" style="padding-left:0px">常用的一些软件</h3>
             <software></software>
         </div>

        <div id="home-box3" class="flex-start" >
            <div style="flex:4">
               <h2 class="htwo1" style="padding-left:0px;marginTop:100px;" >Some Websites.</h2>
               <h3 class="hblack" style="padding-left:0px;" >常用的一些网站</h3>
            </div>
            <footerbox></footerbox>
        </div>

 
          <footer-showtime></footer-showtime>
       
        
    </div>
</template>

<script>
import newsC from "@/components/home/news/news"
import timelineC from "@/components/home/timeline/timeline"
import Imitationinput from '@/components/common/imitationinput/imitationinput.vue'
import timelineheadC from "@/components/home/timeline/timelinehead.vue"
import TimelineheadIcon from '@/components/home/timeline/timelineheadIcon.vue'
import Timelinecontent from '@/components/home/timeline/timelinecontent.vue'
import imgboxC from '@/components/common/imgbox/imgbox.vue'
import Download from '@/components/common/download/download.vue'
import Textbox from '@/components/common/textbox/textbox.vue'
import Timeline from '@/components/home/timeline/timeline.vue'
import Learnmore from '@/components/common/learnmore/learnmore.vue'
import Skill from '@/components/common/skill/skill.vue'
import Showtime from '@/components/common/showtime/showtime.vue'
import Software from '@/components/home/software/software.vue'
import footerbox from '@/components/home/footer/footerbox.vue'
import Lazyshow from '@/components/common/lazyshow/lazyshow.vue'
import FooterShowtime from '@/components/footerShowTime/footerShowtime.vue'
import {httpGet,httpPost} from "@/network/request.js";


export default {
    name:'home-content',
    data() {
        return {
           imgseed:[require('@/assets/img/home/gundam/gundam1.jpg'),require('@/assets/img/home/gundam/gundam2.jpg'),require('@/assets/img/home/gundam/gundam3.jpg')],
           img00:[require('@/assets/img/home/gundam/gundam4.jpg'),require('@/assets/img/home/gundam/gundam5.jpg'),require('@/assets/img/home/gundam/gundam6.jpg')],
           imglist:[],
        };
    },
    components:{
        newsC,
        timelineC,
        Imitationinput,
         timelineheadC,
        TimelineheadIcon,
        Timelinecontent,
        imgboxC,
        Download,
        Textbox,
        Timeline,
        Learnmore,
        Skill,
        Showtime,
        Software,  
        footerbox,
        Lazyshow,
        FooterShowtime,
    },
    mounted(){
        this.imglist=this.imgseed.concat(this.img00);
    httpGet({
      url:'/home'
    })
   
    },
    methods: {
		
    },
    computed: {
      
    },
}
</script>

<style scoped>
   .el-img-box{
       position: relative;
       width: 300px;
       margin-right: 40px;
       cursor: pointer;
       z-index: 2;
   }
   .el-img{
       box-shadow: -10px -13px 83px 10px rgba(49, 57, 68, .72);
       border-radius: 10px;
       height: 200px;
       width: 100%;
   }
   #home-content{
      
       padding-top: 30px;
       position: relative;
       width: 96vw;
       padding-left: 2vw;
       padding-right: 2vw;
       min-width: 1400px;
       z-index: 1;
   }
   @media screen and (min-width:900px) {
    	#home-content{
    		min-width: 900px;
    	}
    }
    #home-box{
        background-color: #040D21;
        border-radius: 20px;
        margin-top: -30px;
        padding-left: 17%;
        padding-right: 5%;
        padding-top: 50px;
        width: 78%;
        padding-bottom: 0px;
    }
    #home-box1{
        border-radius: 20px;
        padding-left: 17%;
        padding-right: 5%;
        width: 78%;
    }
    #home-box2{
        background-color: #040D21;
        border-radius: 20px;
        margin-top: -30px;
        padding-left: 17%;
        padding-right: 5%;
        width: 78%;
        height: 750px;
        padding-top:10px;
        color:white;
        position: relative;
        overflow: hidden;
    }
    #home-box3{
        border-radius: 20px;
        padding-left: 17%;
        padding-right: 5%;
        width: 78%;
        height: 700px;
        padding-top:10px;
        position: relative;
        overflow: hidden;
        display: flex;
    }
   .htwo{
       letter-spacing: 0.2rem;
       background: -webkit-linear-gradient(
-70deg
, #a2facf 0%, #64acff 100%);
       margin-top: 50px;
       -webkit-background-clip: text;
        color: transparent;
        font-size: 2.3rem;
        padding-left: 40px;
        width: 100%;
        display: flex;
        margin-bottom: 5px;
   }
   .htwo1{
         letter-spacing: 0.2rem;
       background: -webkit-linear-gradient(
-70deg
, #db469f 0%, #2188ff 100%);

       margin-top: 50px;
       -webkit-background-clip: text;
        color: transparent;
        font-size: 2.3rem;
        padding-left: 40px;
        width: 100%;
        display: flex;
         margin-bottom: 5px;
         
   }
   .htwo2{
               background: -webkit-linear-gradient(
-70deg
, #ff7170 0%, #ffe57f 100%);
 letter-spacing: 0.2rem;
  margin-top: 50px;
       -webkit-background-clip: text;
        color: transparent;
        font-size: 2.3rem;
        padding-left: 40px;
        width: 100%;
        display: flex;
         margin-bottom: 5px;
   }
   .hblack{
       letter-spacing: 0.2rem;
       font-size: 1.5rem;
       padding-left: 40px;
       margin-bottom: 5px;
       margin-top:-3px
   }
   .moreimg{
       cursor: pointer;
       transition: all 0.2s;
       width: 30px;
       height: 30px;
   }
   .moreimg:hover{
       width: 35px;
       height: 35px;
   }
   .content-box{
       height: 250px;
       width: 100%;
       margin-left: 5%;
   }
   .content-card{
       margin-right: 20px;
       cursor: pointer;
       flex: 1;
       height: 250px;
       box-shadow: 1px 1px 5px gainsboro;
       border-radius: 5px;
       transition: all .3s;
   }
   .content-card:hover{
       box-shadow: 1px 1px 5px gray;

   }
   .content-card img{
       height: 150px;
       width: 100%;
       max-width: 250px;
   }
   .content-card span{
       height: 35px;
       width: 90%;
       color: #819199;
       letter-spacing: 0.1rem;
       font-weight: bold;
       word-wrap: break-word;
       word-break: break-all;
       text-overflow:ellipsis;
       overflow: hidden;
       text-align: center;
       font-size: .8rem;
       padding-left: 5%;
       padding-right: 5%;
   }
   .content-card p{
       height: 20px;
       width: 100%;
       margin: 0px;
       text-align: center;
       font-size: 1.2rem;
       color: #819199;
       font-weight: bold;
       margin-bottom: 15px;
       margin-top: 15px;
   }
   #project1box{
     height: 700px;
     position: relative;
   }
</style>